<template>
    <div class="com-password">
      <input
        :type="show_password ? 'text' : 'password'"
        :placeholder="placeholder"
        :value="value"
        @input="$emit('input', $event.target.value)">
      <div class="opt">
        <div class="item clean" @click="$emit('input','')" v-show="value && clean && !disabled">
          <i ></i>
        </div>
        <div class="item pass" @click="show_password = !show_password" >
          <i :class="{'show-pass':!show_password}"></i>
        </div>
      </div>
    </div>
</template>
<script>
/**
 * 显示隐藏密码
 */
export default {
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    value: String,
    placeholder:{
      type:String,
      default:'',
    },
    clean: { //是否显示清除按钮
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data(){
    return {
      show_password:false
    }
  },
}
</script>
<style lang="less" scoped>
  .com-password {
    display:flex;
    align-items: center;
    width:100%;
    input {
      flex:1;
      width:100%;
      -webkit-appearance: none;
      border:none;
      outline: none;
      height:44px;
      line-height: 44px;
      font-size:30px;
    }


    .opt {
      display: flex;
      align-items: center;
      height: 100%;

      .item {
        height: 100%;
        padding: 10px;

        i {
          position: relative;
          display: block;
        }
      }
      .item+.item {
        margin-left: 10px;
      }
      .pass {
        i {
          width:30px;
          height:30px;
          background-image:url('~assets/img/ic_password_visible.png');
          background-size:30px 30px;
          background-repeat: no-repeat;

          &.show-pass {
            background-image:url('~assets/img/ic_password_hide.png')
          }
        }
      }
      .clean i{
        position: relative;
        display: block;
        width: 30px;
        height: 30px;
        background-color: #c0c3cc;
        border-radius: 50%;

        &::after,
        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 12px;
          height: 3px;
          background-color: #fff;
        }

        &::before {
          transform: translate(-50%) rotate(45deg);
        }

        &::after {
          transform: translate(-50%) rotate(-45deg);
        }
      }
    }
  }
</style>


